<template>
    <div id="content">
        <div id="container">

            <div class="home-style container-block">
                <div class="home-btn-style">
                    <a href="#" target="blank" class="btn-position home-btn btn-style ">
                        <i class="fa fa-twitter fa-fw"></i>
                        <span class="network-name" @mouseenter="showWxImage(1)" @mouseleave="hideWxImage()">
                            <strong>QQ</strong>
                        </span>
                    </a>

                    <a href="#" target="blank" class="btn-position home-btn btn-style">
                        <i class="fa fa-github fa-fw"></i>
                        <span class="network-name" @mouseenter="showWxImage(2)" @mouseleave="hideWxImage()">
                            <strong>WeChat</strong>
                        </span>
                    </a>

                    <a href="#" target="blank" class="btn-position home-btn btn-style ">
                        <i class="fa fa-linkedin fa-fw"></i>
                        <span class="network-name " @mouseenter="showWxImage(3)" @mouseleave="hideWxImage()">
                            <strong>微信公众号</strong>
                        </span>
                    </a>

                    <div class="default_img"><img class="default_img" v-if="flag" :src='img'></div>
                </div>
                <div class="return_button">
                    <el-button icon="arrow-left" type="success" plain @click="goBack">返回</el-button>
                </div>
                <div class="hljs-center">
                    <p>niyueling's Blog Website</p>
                </div>
                <div class="hljs-left">
                    <p>目前从事NodeJS服务端开发，喜欢自己捣鼓研究技术。创建此博客网站初中在于记录自己的学习历程，若能给你带来帮助更是我的幸运!</p>
                </div>
                <div class="hljs-left">
                    <p>个人博客到现在历经三版了，2018年03月发布了博客version 1.0版本，当时由于技术能力的问题技术架构才用了JSP + Mysql，但是由于前后端不分离维护起来比较艰难，后面放弃了version 1.0版本。</p>
                </div>
                <p>因为之前从事过Vue前端开发，所以Version 2.0版本原本计划使用Vue开发，由于想学学新的知识最后选择了Angular4开发。这个版本并未在线上使用，因为这个版本经过测试响应式有bug，在移动端部分机型一直无法加载界面，因为属于一个严重级别的bug，最后放弃这个版本的博客。</p>
                <div class="hljs-left">
                    <p>目前这个版本算是version 3.0版本的博客，目前逐步投入线上正式使用。布局等还在逐步调整，移动端界面设计基本完成，文章发布界面由于使用mavon-editor组件，移动端不好查看效果所以关闭了移动端进入发布文章界面的入口。</p>
                </div>
                <div class="hljs-left">
                    <p>pc端布局还在调整，预计中秋后会将pc端布局调整结束。目前博客功能基本完善，资源下载功能尚待开发。目前博客用户量100来个，很欢迎大家的入驻以及分享心得。</p>
                </div>
                <div class="hljs-center">
                    <p>坚持写技术文章半年多了，其实主流平台还是在微信公众号，所以如果喜欢我的文章欢迎关注我的个人公众号：程序猿周先森</p>
                    <p><img src="http://pic.niyueling.cn:8000/upload_avatar/2019/8/2/0/0/135217777.jpg" alt="06.png" /></p>
                </div>

                <div class="link_friend">
                    <h1>友情链接</h1>
                    <div class="friends">
                        <a href="https://www.qqdeveloper.com">浪子编程走四方</a>
                    </div>

                </div>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: 'article',
        data() {
            return {
                flag: false,
                img: ''
            }
        },
        mounted: function () {

        },
        methods: {
            showWxImage(type) {
                this.flag = true;

                if (type == 1) {
                    this.img = 'https://usuz.oss-cn-shenzhen.aliyuncs.com/image/qq.jpg';
                }
                if (type == 2) {
                    this.img = 'https://usuz.oss-cn-shenzhen.aliyuncs.com/image/wx.jpg';
                }
                if (type == 3) {
                    this.img = 'https://usuz.oss-cn-shenzhen.aliyuncs.com/image/gzh.jpg';
                }
            },
            hideWxImage() {
                this.flag = false;
                this.img = '';
            },
            goBack: function () {
                this.$router.push('/article');
            }
        }
    }

</script>

<style scoped>
    .return_button {
        text-align: left;
        margin-bottom: 2%;
    }

    html, body {
        padding: 0;
        margin: 0;
    }

    * {
        box-sizing: border-box;
    }

    *:hover {
        box-sizing: border-box;
    }

    body {
        overflow-x: hidden;
    }

    a {
        text-decoration: none;
        color: white;
    }

    a:hover {
        color: #fff;
    }

    @media screen and (max-width: 767px) {
        h1 {
            font-size: 15px;
            color: #b85b15;
            line-height: 1.75;
            margin-bottom: 2%;
        }

        h3 {
            font-size: 15px;
        }

        .home-btn-style {
            display: none;
        }

        .link_friend {
            float: left;
            margin-bottom: 4%;
        }
    }

    @media screen and (min-width: 767px) {
        .default_img {
            margin-top: 20px;
            border: 0;
            width: 230px;
            height: 100%;
            text-align: center
        }

        h1 {
            font-size: 60px;
            color: #B8B7B6;
            line-height: 1.1;
        }

        h3 {
            font-size: 30px;
        }

        #container {
            width: 1400px;
            height: 100%;
            position: relative;
            float: left;
        }

        .container-block {
            width: 80%;
            height: 800px;
            margin-left: 110px;
            margin-right: 80px;
        }

        .home-style {
            margin-top: 60px;
            padding-top: 68px;
        }

        .home-btn-style {
            margin-left: 180px;
            margin-top: 60px;
        }

        .btn-style {
            background-color: #C0C0C0;
            border: 2px outset #000;
            font-size: 20px;
            border-radius: 4px;
            box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
            display: inline-block;
            padding: 10px 16px;
            margin: 20px;
            transition: all 0.21s;
            letter-spacing: 2px;
        }

        .btn-style:hover {
            background: rgba(0, 0, 0, 0.9) none repeat scroll 0 0;
            border: 2px outset rgba(0, 0, 0, 0.9);
            letter-spacing: 2px;
            transform: scale(1.11);
            transition: all 0.21s;
        }

        .home-btn {
            float: left;
        }

        .btn-position {
            position: relative;
            margin-top: 20px;
            margin-left: 30px;
        }
    }


</style>
